<template>
  <!-- 正文 -->
  <view style="position: relative;">
    <!-- 顶部自定义导航栏 -->
    <view class="customNavBar">
      <view class="leftBackHeader">
        <view class="backImg" @click="goBack">
          <image src="/static/activity/fanhui btn@2x.png" mode="aspectFill"></image>
        </view>
        <view class="infoBox">
          <image src="/static/main/yonghutouxiang@2x.png" mode="aspectFill"></image>
          <text>米开朗基米</text>
        </view>
      </view>
      <view class="rightShare">
        <view :class="guanzhuStatus === 1 ? 'guanzhuBox' : 'actguanzhuBox'  " @click="gotoGuanzhu">
          {{ guanzhuStatus === 1 ? '关注' : '已关注' }}
        </view>
        <view class="shareImg">
          <image src="/static/activity/share.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <!-- 页面主要内容 -->
    <view class="mainBox">
      <view class="bodyBox">
        <view class="operationImg">
          <!-- 轮播图 -->
          <view class="swiper-container">
            <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
              @change="onSwiperChange">
              <swiper-item v-for="(item, index) in swiperList" :key="index">
                <image class="swiper-image" :src="item.image" mode="aspectFit"></image>
              </swiper-item>
            </swiper>
          </view>
          <!-- 自定义指示点 -->
          <view class="indicator-container">
            <view v-for="(item, index) in swiperList" :key="index" class="indicator" @click="changeSlide(index)">
              <image :src="index === activeIndex ? activeImg : inactiveImg" mode="aspectFit" class="indicator-image">
              </image>
            </view>
          </view>
        </view>
        <view class="operationText">
          <view class="title">
            04.26上海摇爪公园宠物春游计划
          </view>
          <view class="text">
            春天到了，万物复苏了，我们的小可爱们也按捺不住想要出去撒欢的心了！如何为狗狗们策划一场既安全又有趣的划，让小可爱们在这个春天尽情的释放活力！
          </view>
          <view class="tagListBox">
            <text class="tagItem" v-for="(item,index) in tagList " :key="index">
              {{item.name}}
            </text>
          </view>
          <view class="searchBox">
            <image src="/static/search/sousuoicon@2x.png" mode="aspectFit"></image>
            <input type="text" placeholder="相关搜索 哈基米美食" />
          </view>
          <view class="Tips">
            04-23 ·甘肃
          </view>
        </view>
      </view>
      <!-- 评论区 -->
      <view class="commentBox">
        <view class="comTitle">
          评论（585）
        </view>
        <view class="comLine"></view>
        <view class="commentListBox">
          <view class="" v-for="(item,index) in commentList" :key="index">
            <view class="ComUserInfo">
              <view class="headImg">
                <image :src="item.headerImg" mode="aspectFit"></image>
              </view>
              <view class="ComNameText">
                <view class="ComName">
                  <text class="name">{{item.name}}</text>
                  <view class="isauthorBtn" v-if="item.isauthor">
                    作者
                  </view>
                </view>
                <view class="ComText">
                  {{item.text}}
                </view>
                <view class="ComTime">
                  <text class="time">
                    {{item.time}}
                  </text>
                  <!-- <text class="address">
                    .{{item.address}}
                  </text> -->
                  <text class="huifu">
                    回复
                  </text>
                </view>
              </view>
              <view class="zanBox">
                <image v-if="item.isZan" src="/static/main/dianzan@2x (1).png" mode=""></image>
                <image v-else src="/static/main/dianzan@2x.png" mode="aspectFit"></image>
                <text>{{item.zanNum}}</text>
              </view>
            </view>
            <!-- 回复评论区 -->
            <view class="replyComment" v-if="item.comment.length > 0">
              <view class="replyCommentItem" v-for="(i,n) in item.comment" :key="n">
                <view class="replyHeadImg">
                  <image :src="i.headerImg" mode="aspectFit"></image>
                </view>
                <view class="replyInfoBox">
                  <view class="replyName">
                    {{i.name}}
                  </view>
                  <view class="replyText">
                    <view class="repltContent">{{i.text}}</view>
                    <view class="replyTime">{{i.time}}·{{i.address}}</view>
                    <view class="replyHuifu">回复</view>
                  </view>
                </view>
              </view>
              <view class="replyLine">
              </view>
              <view class="replyNum">
                查看全部{{item.replyNum}}条回复
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义页面底部导航栏 -->
    <view class="operationBtn">
      <view class="leftBtn">
        <view class="dis" @click="showZan">
          <image v-if="isShowZan" src="/static/activity/zan.png" mode="aspectFit"></image>
          <image v-else src="/static/main/dianzan@2x (1).png" mode=""></image>
          <text>1.4万</text>
        </view>
        <view class="dis">
          <image src="/static/activity/pinglun.png" mode="aspectFit"></image>
          <text>585</text>
        </view>
        <view class="dis" @click="showShoucang">
          <image v-if="isShowShoucang" src="/static/activity/shoucang.png" mode="aspectFit"></image>
          <image v-else src="/static/main/shoucang@2x.png" mode=""></image>
          <text>585</text>
        </view>
      </view>
      <view class="rightBtn">
        <image src="/static/activity/liuyan.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 报名弹窗 -->
    <view class="success-mask" v-if="showSuccessMask">
      <view class="success-popup">
        关注成功
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeImg: "/static/activity/lunbo icon1@2x.png",
        inactiveImg: '/static/activity/lunbo icon4@2x.png',
        activeIndex: 0,
        swiperList: [{
          image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
        }, {
          image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
        }, {
          image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
        }, {
          image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
        }, ],
        tagList: [{
          name: '#上海宠物活动',
          id: 1
        }, {
          name: '#同城宠物交友',
          id: 2
        }, {
          name: '#宠物交友活动',
          id: 3
        }, ],
        commentList: [{
            headerImg: '/static/main/pinglunqutouxiang@2x.png',
            name: '我想游手好闲',
            isauthor: true,
            time: '3-30',
            isZan: false,
            zanNum: 464,
            text: '小狗厨师把自己喂的圆嘟嘟，简直可爱！',
            address: '',
            replyNum: 0,
            comment: []
          },
          {
            headerImg: '/static/main/pinglunqutouxiang@2x.png',
            name: 'Miyoco',
            isauthor: false,
            time: '3-30',
            isZan: true,
            zanNum: 235,
            text: '好可爱，炒鸡可爱，萌萌嘟',
            replyNum: 65,
            comment: [{
                headerImg: '/static/main/pinglunqutouxiang@2x.png',
                name: '小可乐粘豆包',
                isauthor: false,
                time: '3-30',
                address: '甘肃',
                isZan: false,
                text: '臣附议',
                comment: []
              },
              {
                headerImg: '/static/main/pinglunqutouxiang@2x.png',
                name: '小可乐粘豆包',
                isauthor: false,
                time: '3-30',
                address: '甘肃',
                isZan: false,
                text: '臣附议，还是粮食一起，不然我第一',
                comment: []
              },
            ]
          },
          {
            headerImg: '/static/main/pinglunqutouxiang@2x.png',
            name: 'Miyoco',
            isauthor: false,
            time: '3-30',
            isZan: false,
            zanNum: 234,
            text: '好可爱，炒鸡可爱，萌萌嘟',
            address: '',
            replyNum: 0,
            comment: [],

          },
        ],
        showSuccessMask: false,
        guanzhuStatus: 1, //关注按钮状态 1  关注  2  已关注
        isShowZan: true, //展示是否点赞
        isShowShoucang: true,
      };
    },
    methods: {
      changeSlide(index) {
        this.activeIndex = index;
      },
      onSwiperChange(e) {
        this.activeIndex = e.detail.current;
      },
      goBack() {
		  switch (uni.getSystemInfoSync().platform) {
		  	case 'android':
		  		// let ddd = {
		  		// 	hideNavBar: '0',
		  		// 	hideTotalNavBar: '0',
		  		// 	hideBottomSafeBar: '0',
		  		// 	navtitle: '待使用',
		  		// 	url: 'http://192.168.101.147:8080/#/pages/hotspot/orderDetailSuccess'
		  		// }
		  		// let d = JSON.stringify(ddd)
		  		// console.log(d, '都是对的')
		  		window.AndroidBridge.backEvent();
		  		console.log('运行Android上');
		  		break;
		  	case 'ios':
		  		window.webkit.messageHandlers.backEvent.postMessage({});
		  		break;
		  	default:
		  		console.log('运行在开发者工具上');
		  		break;
		  }
       
      },
      gotoGuanzhu() {
        this.showSuccessMask = true
        this.guanzhuStatus = 2
        // 3秒后自动关闭
        setTimeout(() => {
          this.showSuccessMask = false;
        }, 2000);
      },
      showZan() {
        this.isShowZan = !this.isShowZan
      },
      showShoucang() {
        this.isShowShoucang = !this.isShowShoucang
      },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f8f8f8;
    // background-color: yellow;
  }

  /* 报名成功遮罩层 */
  .success-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;

    .success-popup {
      width: 480rpx;
      height: 72rpx;
      background-color: #ffffff;
      border-radius: 50rpx;
      text-align: center;
      line-height: 72rpx;
    }
  }

  .customNavBar {
    position: fixed;
    top: 0%;
    left: 0;
    height: 120rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 1000;

    .leftBackHeader {
      display: flex;
      align-items: center;

      .backImg {
        width: 48rpx;
        height: 48rpx;

        image {
          width: 100%;
          height: 100%;
        }

        // margin-right: 16rpx;
      }

      .infoBox {
        display: flex;
        align-items: center;

        image {
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
        }

        text {
          font-weight: bold;
          font-size: 28rpx;
          color: #303030;
        }
      }
    }

    .rightShare {
      display: flex;
      align-items: center;

      .shareImg {
        width: 48rpx;
        height: 48rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .guanzhuBox {
        width: 180rpx;
        height: 48rpx;
        background: #D9F700;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
        line-height: 48rpx;
        text-align: center;
        margin-right: 16rpx;
      }

      .actguanzhuBox {
        width: 180rpx;
        height: 48rpx;
        background: #F6F6F6;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
        line-height: 48rpx;
        text-align: center;
        margin-right: 16rpx;
      }
    }
  }

  .operationBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    /* 固定定位 */
    bottom: 0;
    /* 距离底部0 */
    left: 0;
    width: 94%;
    height: 56rpx;
    // background-color: red;
    background-color: #ffffff;
    padding: 18rpx 22rpx 90rpx;

    .leftBtn {
      display: flex;

      .dis {
        display: flex;
        align-items: center;
        margin-right: 16rpx;

        image {
          width: 56rpx;
          height: 56rpx;
        }

        text {
          font-weight: bold;
          font-size: 24rpx;
          color: #7F7F7F;
        }
      }


    }

    .rightBtn image {
      width: 250rpx;
      height: 56rpx;
    }
  }

  .mainBox {
    // height: calc(100vh - 270rpx);
    // overflow-y: auto;
    padding-top: 120rpx;
    padding-bottom: 164rpx;
  }

  .bodyBox {
    background-color: #ffffff;
  }

  .operationImg {
    height: 924rpx;
    padding: 0 28rpx;

    .swiper-container {
      // position: relative;
      width: 100%;
      height: 100%;


      .swiper {
        width: 100%;
        height: 100%;

        .swiper-image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .indicator-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;

      .indicator {
        width: 8rpx;
        height: 8rpx;

        .indicator-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .operationText {
    padding: 0 28rpx;
    margin-top: 50rpx;
    padding-bottom: 64rpx;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #303030;
      margin-bottom: 16rpx;
    }

    .text {
      font-weight: 400;
      font-size: 28rpx;
      color: #303030;
    }

    .tagListBox {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin-top: 40rpx;

      .tagItem {
        font-weight: 400;
        font-size: 28rpx;
        color: #C69C6D;
      }
    }

    .searchBox {
      margin-top: 32rpx;
      width: 674rpx;
      height: 30rpx;
      background: #F6F6F6;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      display: flex;
      align-items: center;
      padding: 10rpx 14rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
      }

      input {
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #303030;
        line-height: 22rpx;
      }
    }

    .Tips {
      margin-top: 32rpx;
      // margin-bottom: 64rpx;
      font-weight: 500;
      font-size: 20rpx;
      color: #7F7F7F;
    }
  }

  .commentBox {
    margin-top: 16rpx;
    background-color: #ffffff;
    // height: 400rpx;
    padding: 28rpx 32rpx;

    .comTitle {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-left: 12rpx;
    }

    .comLine {
      width: 100%;
      height: 0rpx;
      border: 2rpx solid #DBDBDB;
      opacity: 0.4;
      margin-top: 16rpx;
    }

    .commentListBox {

      .ComUserInfo {
        display: flex;
        margin-top: 32rpx;

        .headImg {
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .zanBox {
          display: flex;
          flex-direction: column;

          image {
            width: 44rpx;
            height: 44rpx;
          }

          text {
            font-weight: 500;
            font-size: 20rpx;
            color: #7F7F7F;
          }
        }

        .ComNameText {
          flex: 1;

          .ComName {
            display: flex;
            align-items: center;

            .name {
              font-weight: 400;
              font-size: 28rpx;
              color: #7F7F7F;
              margin-right: 16rpx;
            }

            .isauthorBtn {
              width: 64rpx;
              height: 26rpx;
              background: #C69C6D;
              border-radius: 30rpx 30rpx 30rpx 30rpx;
              font-weight: 500;
              font-size: 20rpx;
              color: #F9F9F9;
              line-height: 26rpx;
              text-align: center;
            }
          }

          .ComText {
            font-weight: 400;
            font-size: 28rpx;
            color: #303030;
            line-height: 46rpx;
          }

          .ComTime {
            // margin-top: 16rpx;

            .time {
              font-weight: 500;
              font-size: 20rpx;
              color: #7F7F7F;
              margin-right: 32rpx;
            }

            .address {
              font-weight: 500;
              font-size: 20rpx;
              color: #303030;
            }

            .huifu {
              font-weight: 500;
              font-size: 20rpx;
              color: #303030;
            }
          }
        }
      }

      .replyComment {
        width: 80%;
        // height: 358rpx;
        background: #F8F8F8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-left: 80rpx;
        padding: 32rpx 16rpx 16rpx;
        margin-top: 16rpx;

        .replyCommentItem {
          display: flex;
          // align-items: flex-start;
          margin-bottom: 38rpx;

          .replyHeadImg {
            width: 48rpx;
            height: 48rpx;
            margin-right: 11rpx;

            image {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .replyInfoBox {
            .replyName {
              font-weight: 400;
              font-size: 28rpx;
              color: #7F7F7F;

            }

            .replyText {
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .repltContent {
                font-weight: 400;
                font-size: 28rpx;
                color: #303030;
                margin-right: 16rpx;
              }

              .replyTime {
                font-weight: 500;
                font-size: 20rpx;
                color: #7F7F7F;
                margin-right: 16rpx;
              }

              .replyHuifu {
                font-weight: 500;
                font-size: 20rpx;
                color: #303030;
              }
            }
          }

        }

      }

      .replyLine {
        width: 100%;
        height: 0rpx;
        border: 2rpx solid #F1F1F1;
      }

      .replyNum {
        font-weight: 500;
        font-size: 20rpx;
        color: #000000;
        margin: 16rpx auto;
        text-align: center;
      }
    }
  }
</style>